import React, { Component } from 'react';
import PropTypes from 'prop-types';

import playVideo from 'modules/uploadVideo/playVideo';

import './index.less';

export default class VideoPlay extends Component {
    static defaultProps = {
        loop: false,
        useImg: false,
        className: '',
        style: {},
        autoPlay: false,
        needHide: false, // 暂停时会hide视频
        afterPlay: () => {},
        isPreload: false,
    };

    static propTypes = {
        playsinline: PropTypes.bool.isRequired,
        src: PropTypes.string.isRequired,
        poster: PropTypes.string.isRequired,
        useImg: PropTypes.bool,
        className: PropTypes.string,
        style: PropTypes.shape({}),
        loop: PropTypes.bool,
        autoPlay: PropTypes.bool,
        needHide: PropTypes.bool,
        afterPlay: PropTypes.func,
        isPreload: PropTypes.bool, // APP内是否预加载视频
    };

    componentDidMount() {
        const { autoPlay, isPreload, src, poster } = this.props;

        // APP内视频预加载
        isPreload &&
            src &&
            WPT.wptBridge.preloadVideo([
                {
                    url: src,
                    cover: poster,
                },
            ]);

        if (autoPlay) {
            if (WPT.os.device == 'wechat') {
                setTimeout(() => {
                    WPT.mockUserAction(() => {
                        this.play();
                    });
                });
            } else {
                this.play();
            }
        }
    }

    play = () => {
        const { src = '', playsinline = false, loop, needHide, poster = '' } = this.props;

        if (this.video && this.video.classList.contains('loading')) {
            return;
        }

        this.currVideo = playVideo(this.video, {
            src,
            playsinline,
            loop,
            needHide,
            onBeforePlay: () => {
                if (playsinline) {
                    this.video && this.video.classList.add('loading');
                }
            },
            onPlay: () => {
                if (playsinline) {
                    setTimeout(() => {
                        this.video && this.video.classList.remove('loading');
                    }, 2000);
                }
            },
            cover: poster,
            isPreload: this.props.isPreload,
        });
        this.props.afterPlay && this.props.afterPlay();
    };

    pause = () => {
        this.currVideo && this.currVideo.pause();
    };

    render() {
        const {
            poster = '',
            useImg,
            className,
            style,
            // eslint-disable-next-line react/prop-types
            children,
        } = this.props;

        return (
            <div
                className={`video-play ${className}`}
                ref={(container) => {
                    this.video = container;
                }}
                style={{ backgroundImage: `url(${poster})`, ...style }}
                onClick={this.play}
                role="button"
                tabIndex="0"
            >
                {useImg && <img src={`${poster}`} alt="" />}
                {children}
            </div>
        );
    }
}
